<!--
 * @Author: C.
 * @Date: 2023-04-12 09:53:34
-->
<template>
  <div class="user-item" @click="itemClick">
    <div>
      <!-- PhotoUrl -->
      <Avatar :size="35" :src="getImgUrl(userData.PhotoUrl)" v-if="userData.PhotoUrl" />
      <Avatar :size="35" style="background-color: #0960bd" v-else>
        {{ userData.UserId }}
      </Avatar>
      <span class="user-name">{{ userData.UserName }}</span>
    </div>
    <Tag color="#0960bd" v-if="!props.close">{{ props.userData.Department || '--' }}</Tag>
    <Icon
      icon="ant-design:close-circle-outlined"
      size="30"
      class="close-icon"
      v-if="props.close"
      @click="closeClick"
    />
  </div>
</template>

<script lang="ts" setup>
  import { toRaw, unref, PropType } from 'vue';
  import { Avatar, Tag } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { IUserData } from './userModel';
  import { getImgUrl } from '/~/utils/system/index';
  const props = defineProps({
    userData: {
      type: Object as PropType<IUserData>,
      required: true,
    },
    close: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  });
  const emit = defineEmits(['select', 'close']);
  function itemClick() {
    emit('select', toRaw(unref(props.userData)));
  }
  // closeClick
  function closeClick() {
    emit('close', toRaw(unref(props.userData)));
  }
</script>
<style lang="less" scoped>
  [data-theme='dark'] {
    .user-item:hover {
      // border: 2px solid transparent;
      background-color: @trigger-dark-bg-color;
    }
  }

  .user-item {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    // border-bottom: 1px solid #ccc;
    cursor: pointer;

    &:hover {
      background-color: #fff;
    }

    .close-icon {
      position: absolute;
      right: 20px;
      top: 5px;
      color: #ccc;
    }

    .user-name {
      margin: 0 10px;
      font-size: 17px;
    }
  }
</style>
